Exercice 1

Code

<nav class="main-nav"> <ul> <li><a href="/" class="active">Accueil</a></li> <li><a href="/about">À propos</a></li> <li><a href="/contact">Contact</a></li> </ul> </nav> <main> <article class="post featured"> <h2>Premier article</h2> <p>Contenu...</p> </article> <article class="post"> <h2>Deuxième article</h2> <p>Contenu...</p> </article> </main>

1.1 Sélecteurs

1. Sélectionner tous les liens dans la navigation :

.main-nav a

2. Sélectionner uniquement le lien actif :

.main-nav a.active

3. Sélectionner l'article qui a la classe featured :

article.featured

4. Sélectionner le premier paragraphe de chaque article :

article p:first-of-type

5. Sélectionner les éléments li pairs :

li:nth-child(even)

1.2 Spécificité

1. Classement par spécificité croissante :

p < .text < p.text < #main < #main .text p

2. Si deux règles ont la même spécificité :

La dernière règle écrite dans le code gagne.

3. Pourquoi éviter !important :

Parce qu’il rend le code difficile à maintenir et casse la priorité normale.